﻿@model DirectDebitPaymentInfoModel

<fieldset>
    <legend class="sr-only">@T("Plugins.FriendlyName.Payments.DirectDebit")</legend>
    <input type="hidden" name="OfflinePaymentMethodType" value="DirectDebit" />

    <div class="opt-form">
        <div class="form-group row">
            <label id="direct-debit-iban-label" for="EnterIBAN_2" class="col-md-3 col-form-label">
                @T("Plugins.Payments.DirectDebit.EnterIBAN")
            </label>
            <div class="col-md-9">
                <div class="form-control-plaintext" role="radiogroup" aria-labelledby="direct-debit-iban-label">
                    <div class="form-check form-check-inline">
                        <input type="radio" id="EnterIBAN_2" name="EnterIBAN" value="iban" attr-checked='(Model.EnterIBAN == "iban", "checked")' class="form-check-input" />
                        <label for="EnterIBAN_2" class="form-check-label">@T("Plugins.Payments.DirectDebit.YesEnterIBAN")</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input type="radio" id="EnterIBAN_1" name="EnterIBAN" value="no-iban" attr-checked='(Model.EnterIBAN == "no-iban", "checked")' class="form-check-input" />
                        <label for="EnterIBAN_1" class="form-check-label">@T("Plugins.Payments.DirectDebit.NoEnterIBAN")</label>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group row">
            <label asp-for="DirectDebitAccountHolder" class="col-md-3 col-form-label required"></label>
            <div class="col-md-9">
                <input asp-for="DirectDebitAccountHolder" />
                <span asp-validation-for="DirectDebitAccountHolder"></span>
            </div>
        </div>

        <div class="dd-payment-no-iban">
            <div class="form-group row">
                <label asp-for="DirectDebitAccountNumber" class="col-md-3 col-form-label required"></label>
                <div class="col-md-9">
                    <input asp-for="DirectDebitAccountNumber" />
                    <span asp-validation-for="DirectDebitAccountNumber"></span>
                </div>
            </div>
            <div class="form-group row">
                <label asp-for="DirectDebitBankCode" class="col-md-3 col-form-label required"></label>
                <div class="col-md-9">
                    <input asp-for="DirectDebitBankCode" />
                    <span asp-validation-for="DirectDebitBankCode"></span>
                </div>
            </div>
            <div class="form-group row">
                <label asp-for="DirectDebitCountry" class="col-md-3 col-form-label required"></label>
                <div class="col-md-9">
                    <input asp-for="DirectDebitCountry" />
                    <span asp-validation-for="DirectDebitCountry"></span>
                </div>
            </div>
        </div>

        <div class="dd-payment-iban">
            <div class="form-group row">
                <label asp-for="DirectDebitIban" class="col-md-3 col-form-label required"></label>
                <div class="col-md-9">
                    <input asp-for="DirectDebitIban" />
                    <span asp-validation-for="DirectDebitIban"></span>
                </div>
            </div>
            <div class="form-group row">
                <label asp-for="DirectDebitBic" class="col-md-3 col-form-label required"></label>
                <div class="col-md-9">
                    <input asp-for="DirectDebitBic" />
                    <span asp-validation-for="DirectDebitBic"></span>
                </div>
            </div>
        </div>

        <div class="form-group row">
            <label asp-for="DirectDebitBankName" class="col-md-3 col-form-label required"></label>
            <div class="col-md-9">
                <input asp-for="DirectDebitBankName" />
                <span asp-validation-for="DirectDebitBankName"></span>
            </div>
        </div>
    </div>
</fieldset>

<script data-origin="direct-debit">
    $(function () {
        $('input[name=EnterIBAN]').on('change', function () {
            const newType = $(this).filter(':checked').val();
            if (newType !== undefined) {
                const el = $('.dd-payment-' + newType);
                const elOther = $('.dd-payment-' + (newType === 'iban' ? 'no-iban' : 'iban'));

                el.slideDown('fast', function () {
                    // WCAG
                    el.attr('aria-hidden', false).find('input').prop('disabled', false);
                    elOther.attr('aria-hidden', true).find('input').prop('disabled', true);
                    elOther.hide();
                });
            }
        }).trigger('change');
    });
</script>